<template>
	<view class="">
		<NavBar title="写评价" :isShowLeftBtn="true">
		</NavBar>
	</view>
	<view class="content" :style="{minHeight:contentHeight}">
		<view class="main">
			<view class="row1 m_b_80">
				<view class="">
					<up-upload :fileList="imgForm.fileList1" @afterRead="afterRead" @delete="deletePic" :name="1"
						multiple :maxCount="6" width="190rpx" height="190rpx">
						<view class="upload_box">
							<view class="m_t_38">
								<up-icon name="camera" color="#4E4E4E" size="46"></up-icon>
							</view>
							<view class="">
								<text class="f_30_9" style="color: #333333;">
									添加照片
								</text>
							</view>
						</view>
					</up-upload>
				</view>
				<view class="hr m_t_32 m_b_32">

				</view>
				<view class="m_b_32">
					<view class="flex" style="align-items: flex-start;">
						<view class="m_r_10">
							<text class="f_26_0_b">
								综合评价
							</text>
						</view>
						<view class="m_t_4">
							<up-rate active-color="linear-gradient(to bottom, #FFFF59, #F9B900);"
								inactive-color="#b2b2b2" gutter="5" size="20" v-model="form.evaluate_score"></up-rate>
						</view>
					</view>
				</view>
				<view class="hr m_t_32 m_b_24">

				</view>
				<view class="">
					<up-textarea v-model="form.evaluate_remark" placeholder="欢迎分享真实消费体验哦！" height="140"
						border="none"></up-textarea>
				</view>

			</view>
			<view class="submit_btn" @click="onSubmit">
				<up-button throttleTime="1000">
					<text class="f_30_f">
						提交评价
					</text>
				</up-button>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { ref, reactive, getCurrentInstance } from "vue";
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import NavBar from "@/components/navbar.vue"
	const { proxy } = getCurrentInstance()
	const contentHeight = ref('100vh')
	const statusBarHeight = ref(88)

	onLoad((e) => {
		uni.getSystemInfo({
			success: function (info) {
				statusBarHeight.value = (info.statusBarHeight + 44) * 2
				contentHeight.value = `calc(100vh - ${statusBarHeight.value + 80}rpx)`
			}
		});
		form.value.wash_order_id = e.id
	})
	const form = ref({
		wash_order_id: '',
		evaluate_pic: '',
		evaluate_score: 5,
		evaluate_remark: ''
	})
	const imgForm = reactive({
		fileList1: [],
	})

	const remarkVal = ref()



	// 删除图片
	const deletePic = (event) => {
		let fileList = imgForm[`fileList${event.name}`]
		fileList.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		let fileList = imgForm[`fileList${event.name}`]
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = fileList.length;
		lists.map((item) => {
			fileList.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			console.log(result);
			let item = fileList[fileListLen];
			fileList.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: proxy.$config.baseUrl + '/api/common/upload',
				filePath: url,
				name: 'file',
				formData: {
					user: 'test',
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl);
					}, 1000);
				},
			});
		});
	};
	const onSubmit = async () => {
		let params = JSON.parse(JSON.stringify(form.value))
		// if (imgForm.fileList1.length == 0) {
		// 	uni.$u.toast('请至少上传一张图片')
		// 	return
		// }
		if(imgForm.fileList1.length>0){
			params.evaluate_pic = proxy.$gloab.togetherUrl(imgForm.fileList1)
		}
		let res = await proxy.$http('order.orderEvaluate', { ...params })
		if (res.code == 1) {
			uni.$u.toast('评价成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		background: #F7F8FC;
		padding: 20rpx;
		padding-bottom: 64rpx;

		.row1 {
			padding: 40rpx 18rpx;
			background: #FFFFFF;
			box-shadow: 2rpx 7rpx 5rpx 0rpx rgba(197, 197, 197, 0.29);
			border-radius: 10rpx;

			.upload_box {
				width: 220rpx;
				height: 220rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				border: 2px dashed #E0DFDF;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
		}


	}

	::v-deep.submit_btn {
		.u-button {
			width: 712rpx;
			height: 96rpx;
			background: #FD4925;
			border-radius: 10rpx;
		}
	}

	::v-deep.uicon-star-fill {
		background: linear-gradient(to bottom, #FFFF59, #F9B900);
		/*设置渐变的方向从左到右 颜色从ff0000到ffff00*/
		-webkit-background-clip: text;
		/*将设置的背景颜色限制在文字中*/
		-webkit-text-fill-color: transparent;
		/*给文字设置成透明*/
	}

	::v-deep.u-textarea__field {
		font-size: 24rpx !important;
	}
</style>